import { Component, Vue, Prop, Provide, Watch, Ref, Inject } from 'vue-property-decorator'
import { fieldAttrMap } from '@/afterSales/views/config/serviceConfig/fieldConfig/fieldType/index'
import { widgetInRecord } from '@/afterSales/views/config/serviceConfig/fieldConfig/form/widget/index'
import { itemToRule } from '@/afterSales/views/config/serviceConfig/fieldConfig/form/rule/ruleConfig'
import { Form } from 'element-ui'
import { formRollToFirstError } from '@/utils/common'
const speed = 10
const onlyDisplayField = ['group']
@Component({
  name: 'formCom',
  components: {
    widgetInRecord
  }
})
export default class extends Vue {
  @Prop({ default: () => ([]) }) public fieldList: any;
  @Prop({ default: () => ({}) }) public form: any;
  @Prop({ default: () => ({}) }) public range: any;
  @Prop({ default: () => ({}) }) public fieldsMap: any;
  @Prop({ default: '' }) public modelId!: string
  @Prop({ default: '' }) public orderId!: string
  @Prop({ default: false }) public isOnlyShow!: boolean;
  @Provide() public recordVM = this;
  @Prop({ default: true }) public isShowRule!: boolean;
  private unwatchList = []
  private renderPriority = 10
  private timer = null
  private get showFieldList () {
    let fieldList = this.fieldList.filter(item => {
      return !item.hide
    })
    fieldList = fieldList.map(item => {
      let fieldRules: any[] = [];
      fieldRules = itemToRule(item);
      return { ...item, fieldRules, isOpen: true };
    });
    return fieldList
  }

  private inputChange (key) {
    return (value, isChange = true) => {
      this.$set(this.form, key, value)
      this.$emit('handleDynamicForm', key)
      if (isChange) {
        this.$emit('change', this.form)
      }
    }
  }

  private onlyInput (key) {
    return (value, isChange = true) => {
      this.$set(this.form, key, value)
      if (isChange) {
        this.$emit('change', this.form)
      }
    }
  }

  public clearValidate () {
    setTimeout(() => {
      (this.$refs as any).formRef.clearValidate();
    })
  }

  // 校验
  public validate () {
    const formRef = (this.$refs.formRef as Form)
    let pass: any = false;
    formRef.validate(valid => {
      if (valid) {
        pass = true
      } else {
        // 滚动到错误节点
        formRollToFirstError(formRef.$parent.$parent.$el.parentElement)
      }
    });
    return pass;
  }

  private get fieldAttrWidth () {
    return fieldAttrMap.width
  }

  private clickGroup (data) {
    this.fieldList = this.fieldList.map(item => {
      if (item.fieldType !== 'group' && item.groupBusinessId === data.businessId) {
        item.isHidden = !item.isHidden
      }
      return item
    })
  }

  private render (h) {
    const { showFieldList, form, inputChange, clickGroup, onlyInput, fieldAttrWidth, isOnlyShow, modelId, orderId, isShowRule } = this
    return <el-form
      ref='formRef'
      size='medium'
      disabled={isOnlyShow}
      props={{ model: this.form }}
      label-position='top'
      nativeOnSubmit={(e) => e.preventDefault()}>
      {
        showFieldList.map((field, index) => {
          if (onlyDisplayField.includes(field.fieldType)) {
            return <widgetInRecord onClickGroup={clickGroup} key={field.businessId} item={field} value={form[field.businessId]}></widgetInRecord>
          } else {
            if (!field.isHidden) {
              return <el-form-item
                label={field.name}
                prop={field.businessId}
                rules={isShowRule ? field.fieldRules || [] : []}
                style={{ width: fieldAttrWidth[field.width] }}
                key={field.businessId}>
                <widgetInRecord disabled={field.disabled || isOnlyShow } modelId={modelId} orderId={orderId} value={form[field.businessId]}
                  ononlyInput={onlyInput(field.businessId)} oninput={inputChange(field.businessId)} {...{ on: this.$listeners }} key={field.businessId} item={field}></widgetInRecord>
              </el-form-item>
            }
          }
        })
      }
    </el-form>
  }
}
